<template>
	<!--留言表单-->
	<MessageBoardForm></MessageBoardForm>

	<!--排序方式-->
	<SortOrder></SortOrder>

	<!--留言列表-->
	<MessageBoardList :ambList="ambList.data.mbList"></MessageBoardList>

	<!--页码footer-->
	<el-pagination :current-page="ambList.data.currentPage" :page-size="ambList.data.pageSize" :small="false"
		:disabled="false" :background="true" layout="prev, pager, next, jumper" :page-count="ambList.data.totalPage"
		:pager-count="5" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script setup>
	import MessageBoardForm from '@/components/MessageBoardForm.vue'
	import SortOrder from '@/components/SortOrder.vue'
	import MessageBoardList from '@/components/MessageBoardList.vue'
	import {
		v4 as uuidv4
	} from 'uuid'
	import {
		onMounted,
		ref,
		reactive,
		nextTick
	} from 'vue'

	let api_url = import.meta.env.VITE_API_URL;

	let ambList = ref({
		data: {
			ambList: [],
			currentPage: 0,
			totalPage: 0,
			currentPageSize: 0,
			PageSize: 0,
		},
		code: "",
	});

	let queryBody = {
		keyword: "我干你文",
		sortType: "createTime",
		sortRule: "desc",
		currentPage: 1,
		pageSize: 10
	};

	function getAmbList(queryBody) {
		// 获取数据
		let data = localStorage.getItem('sessionKey');
		if (data == null || data === "") {
			data = uuidv4()
			// 存储数据  
			localStorage.setItem('sessionKey', data);
		}

		queryBody.sessionKey = data;

		let body = JSON.stringify(queryBody);

		fetch( api_url + "/api/v1/aha/external/mb/get_amb_list", {
				method: "POST",
				body: body,
				headers: {
					"Content-Type": "application/json",
				}
			})
			.then((response) => response.json())
			.then((response) => {
				ambList.value = response
				console.log(ambList.value)
			})
			.catch((error) => console.log(error))
	}


	onMounted(() => getAmbList(queryBody));

	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}

	const handleCurrentChange = (val) => {
		ambList.value.data.currentPage = val;
		queryBody.currentPage = val;
		getAmbList(queryBody)
	}
</script>

<style scoped>

</style>